<!DOCTYPE html>
<html>
	<head>
		<title>招商证券校园招聘</title>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1.0, minimum-scale=1.0" />
		<meta name="format-detection" content="telephone=no" />
		<link rel="stylesheet" type="text/css" href="./css/base.css"/>
		<link rel="stylesheet" type="text/css" href="./css/swiper.min.css?v=20160912"/>
		<link rel="stylesheet" type="text/css" href="./css/animate.min.css"/>
		<link rel="stylesheet" type="text/css" href="./css/index.css?v=201609027"/>
		<script>
			!function(){window.design=750,window.resp=function(){var a=document.documentElement.clientWidth,b=100*(750/design);a>design&&(a=design),document.documentElement.style.fontSize=(b>100*(a/design)?100*(a/design):b)+"px"},resp(),window.onresize=function(){resp()}}();
		</script>
        <script type="text/javascript" src='./js/jquery.min.js'></script>
	</head>
<body ontouchstart>

	<div id='loading' ontouchstart="return false;">
		<div class='logo'></div>
		<div class='bar'>
			<div class='bar-progress'></div>
			<div class='bar-progress-gb'></div>
			<span class='percent'>0%</span>
		</div>
	</div>
	<div class="icon_audio off-1">
		<span class="iconaudio1"><s class="icon_audio_anim"></s></span>
		<span class="iconaudio2"><s class="icon_audio_anim"></s></span>
		<span class="iconaudio3"><s class="icon_audio_anim"></s></span>
		<div class="audio-loading"></div>
	</div>
<!--	<audio preload="auto"  loop="true" autoplay style="width:0;height:0" id="audio-music">
		<source src="audio/music.mp3" type="audio/mpeg" />
	</audio>-->

	<div class='wrapper'>
		<div class="swiper-container" id="slide">
			<div class="swiper-wrapper">
				<div class="swiper-slide">
					<div class='page page-1'>
						<div class="logo ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.8s" swiper-animate-delay="0s"></div>
						<div class="slogan-1 ani" swiper-animate-effect="bounceIn" swiper-animate-duration="0.8s" swiper-animate-delay="0.3s"></div>
						<div class="_2017 ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="0.8s"></div>
					</div>
				</div>
				<div class="swiper-slide">
					<div class='page page-2'>
						<div class="title">
							<p class="title-1 ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0s">招商证券</p>
							<p class="title-2 ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.2s">2017校园招聘正式启航</p>
						</div>
						<ul class="type" swiper-animate-effect="bounceIn" swiper-animate-duration="0.6s" swiper-animate-delay="0.1s">
							<li class="ani" swiper-animate-effect="bounceInDown" swiper-animate-duration="0.7s" swiper-animate-delay="0.5s"></li>
							<li class="ani" swiper-animate-effect="bounceInRight" swiper-animate-duration="0.7s" swiper-animate-delay="0.8s"></li>
							<li class="ani" swiper-animate-effect="bounceInRight" swiper-animate-duration="0.7s" swiper-animate-delay="1.1s"></li>
							<li class="ani" swiper-animate-effect="bounceIn" swiper-animate-duration="1s" swiper-animate-delay="2s"></li>
							<li class="ani" swiper-animate-effect="bounceInLeft" swiper-animate-duration="0.7s" swiper-animate-delay="1.7s"></li>
							<li class="ani" swiper-animate-effect="bounceInLeft" swiper-animate-duration="0.7s" swiper-animate-delay="1.4s"></li>
						</ul>
						<p class="tips-1 ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.8s" swiper-animate-delay="1.5s">16个部门44个岗位,逾百人需求</p>
						<p class="tips-2 ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.8s" swiper-animate-delay="1.8s">社会人士与实习生也有彩蛋 ^_^</p>
					</div>
				</div>
				<div class="swiper-slide">
					<div class='page page-3'>
						<div class="map ani" swiper-animate-effect="bounceInDown" swiper-animate-duration="0.8s" swiper-animate-delay="0s">
							<ul class="process">
								<li class="sub sub-1 ani" swiper-animate-effect="bounceIn" swiper-animate-duration="1s" swiper-animate-delay="1s"><span></span></li>
								<li class="sub sub-2 ani" swiper-animate-effect="bounceIn" swiper-animate-duration="1s" swiper-animate-delay="1.6s"><span></span></li>
								<li class="sub sub-3 ani" swiper-animate-effect="bounceIn" swiper-animate-duration="1s" swiper-animate-delay="2.4s"><span></span></li>
								<li class="sub sub-4 ani" swiper-animate-effect="bounceIn" swiper-animate-duration="1s" swiper-animate-delay="3.2s"><span></span></li>
								<li class="sub sub-5 ani" swiper-animate-effect="bounceIn" swiper-animate-duration="1s" swiper-animate-delay="4s"><span></span></li>
								<li class="sub sub-6 ani" swiper-animate-effect="flipInX" swiper-animate-duration="1s" swiper-animate-delay="5s"> </li>
							</ul>
						</div>
						<div class="map-place"></div>
						<div class="times">
							<ul>
								<li class="ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="5.1s">
									10月26日&emsp;复旦大学
								</li>
								<li class="ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="5.2s">
									10月27日&emsp;北京大学
								</li>
								<li class="ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="5.4s">
									10月28日&emsp;清华大学
								</li>
								<li class="ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="5.6s">
									10月31日&emsp;北京大学深圳研究生院
								</li>
								<li class="ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="5.9s">
									11月01日&emsp;中山大学
								</li>
							</ul>
						</div>
						<div class="flag"></div>
						<div class="tips">＊实际行程请以官方招聘平台信息为准</div>
					</div>
				</div>
				<div class="swiper-slide">
					<!--问题-->
					<div class='page question '>
						<div class="title"></div>
						<div class="paper-box">
							<div class="paper paper-1">
								<div class="swiper-container question-box">
									<div class="swiper-wrapper">
										<div class="swiper-slide">
											<div class="item">
												<h3><span>1.招商证券诞生于哪一年？</span></h3>
												<ul>
													<li class=""><div class="number"><i>A</i></div> <span class="sub">1991年，与中国证券市场同岁</span> <div class="check"></div></li>
													<li><div class="number"><i>B</i></div> <span class="sub">1872年，百年招商始于洋务运动</span> <div class="check"></div></li>
												</ul>
											</div>
											<div class="item">
												<h3><span>2.招商证券的核心价值观是？</span></h3>
												<ul>
													<li><div class="number"><i>A</i></div> <span class="sub">励新图强，敦行致远</span> <div class="check"></div></li>
													<li><div class="number"><i>B</i></div> <span class="sub">以商业成功推动时代进步</span> <div class="check"></div></li>
												</ul>
											</div>
											<div class="item">
												<h3><span>3.招商证券的愿景是？</span></h3>
												<ul>
													<li><div class="number"><i>A</i></div> <span class="sub">单一业务，偏科发展</span> <div class="check"></div></li>
													<li><div class="number"><i>B</i></div> <span class="sub">打造中国最佳投资银行</span> <div class="check"></div></li>
												</ul>
											</div>
											<div class="item">
												<h3><span>4.怎么查看岗位与投递简历？</span></h3>
												<ul>
													<li class=""><div class="number"><i>A</i></div> <span class="sub">关注官方微信 <span class="mark">(cmschina600999)</span> ,点击"招贤纳士"投递简历</span> <div class="check"></div></li>
													<li><div class="number"><i>B</i></div> <span class="sub">登录官方招聘平台<span class="mark">(www.wintalent.cn/cmschina)</span>，查看具体岗位并投递简历</span> <div class="check"></div></li>
													<li><div class="number"><i>C</i></div> <span class="sub">以上均可</span> <div class="check"></div></li>
												</ul>
											</div>
											<div class="item">
												<h3><span>5.应届生、实习生、社会人士是否都可以通过以上渠道投递简历？</span></h3>
												<ul>
													<li><div class="number"><i>A</i></div> <span class="sub">可以</span> <div class="check"></div></li>
													<li><div class="number"><i>B</i></div> <span class="sub">不可以</span> <div class="check"></div></li>
												</ul>
											</div>
											<div class="item">
												<h3><span>6.获取招商证券最新最全招聘信息（校招、社招、实习）的方法是？</span></h3>
												<ul>
													<li><div class="number"><i>A</i></div> <span class="sub">登录官方招聘平台<span class="mark">(www.wintalent.cn/cmschina)</span>查看岗位信息、宣讲会行程、笔面试安排等</span> <div class="check"></div></li>
													<li><div class="number"><i>B</i></div> <span class="sub">向亲朋好友打听</span> <div class="check"></div></li>
												</ul>
											</div>
										</div>
									</div>
									<div class="swiper-scrollbar"></div>
								</div>
							</div>
						</div>
						<div class="btn-next" data-paper="0">提交</div>
					</div>
				</div>
				<div class="swiper-slide">
					<div class='page page-5'>
						<div class="layer" data-depth="0.3">
							<div class="link-box ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.6s" swiper-animate-delay="0.2s">
								<a href="http://demo.wintalent.cn:84/cms/home.html"></a>
								<div class="phone ani" swiper-animate-effect="tada" swiper-animate-duration="1s" swiper-animate-delay="0.6s">
									<!--<div class="cirZoom"></div>-->
									<!--<div class="hand"></div>-->
								</div>
								<ul class="link">
									<li class="ani" swiper-animate-effect="bounceIn" swiper-animate-duration="1s" swiper-animate-delay="1.8s"></li>
									<li class="ani" swiper-animate-effect="bounceIn" swiper-animate-duration="1s" swiper-animate-delay="1s"></li>
									<li class="ani" swiper-animate-effect="bounceIn" swiper-animate-duration="1s" swiper-animate-delay="2.8s"></li>
								</ul>
							</div>
							<div class="way ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.6s" swiper-animate-delay="0.2s"></div>
						</div>
					</div>
				</div>
				<div class="swiper-slide">
					<div class='page page-6'>
						<div class="slogan-6 ani" swiper-animate-effect="bounceIn" swiper-animate-duration="0.8s" swiper-animate-delay="0.3s"></div>
						<div class="_2code" ><img src="./images/2code.png" alt=""></div>
						<p>扫扫有惊喜，机会在这里</p>
					</div>
				</div>
			</div>
		</div>
		<div class="answer" id="answer">
			<div class="content">
				<div class="face"></div>
				<div class="scores"><span>00</span>分</div>
				<div class="word word-100 ">
					<p><span class="h2">你太棒了！</span><br><span class="h3">赶紧去投递简历吧</span></p>
				</div>
				<div class="word word-80 ">
					<p><span class="h2">你真棒！</span><br><span class="h3">快关注招商证券了解详情信息<br /> 并投递简历吧</span></p>
				</div>
				<div class="word word-60 ">
					<p><span class="h2">加油！</span><br><span class="h3">抓紧时间了解招商证券<br /> 并投递简历吧</span></p>
				</div>
				<div class="word word-0">
					<p><span class="h3">革命尚未成功，同志还需努力<br />赶快再试一次吧</span></p>
				</div>
				<!---->
				<div class="result-box">
					<div class="swiper-container" id="result-wrap">
						<div class="swiper-wrapper">
							<div class="swiper-slide">
								<div class="result">
									<h3>1.招商证券诞生于哪一年？</h3> <p>1991年，与中国证券市场同岁</p>
								</div>
								<div class="result">
									<h3>2.招商证券的核心价值观是？</h3> <p>励新图强，敦行致远</p>
								</div>
								<div class="result">
									<h3>3.招商证券的愿景是？</h3> <p>打造中国最佳投资银行</p>
								</div>
								<div class="result">
									<h3>4.怎么查看岗位与投递简历？</h3> <p>以上均可</p>
								</div>
								<div class="result">
									<h3>5.应届生、实习生、社会人士是否都可以通过以上渠道投递简历？</h3> <p>可以</p>
								</div>
								<div class="result">
									<h3>6.获取招商证券最新最全招聘信息（校招、社招、实习）的方法是？</h3> <p>登录官方招聘平台<span class="mark">(www.wintalent.cn/cmschina)</span>查看岗位信息、宣讲会行程、笔面试安排等</p>
								</div>
							</div>
						</div>
						<div class="swiper-scrollbar"></div>
					</div>
				</div>
			</div>
			<div class="button">
				<div class="btn btn-retry">再试一次</div>
				<div class="btn btn-back">返回投递简历</div>
			</div>
		</div>
	</div>

	<script type="text/javascript" src='./js/loading.js?v=201609051'></script>
	<script type="text/javascript" src='./js/swiper.min.js'></script>
	<script type="text/javascript" src='./js/swiper.animate1.0.2.min.js'></script>
	<script type="text/javascript" src='./js/jquery.parallax.min.js'></script>
</body>
<script type="text/javascript">

    var audio = function(){
        var myVideo = $('#audio-music')[0];
		if (myVideo.paused){
			myVideo.play();
			$('.icon_audio').addClass('border_anim');
			$('.icon_audio').removeClass('off-1');
		}
		else{
			myVideo.pause();
			$('.icon_audio').removeClass('border_anim')
			$('.icon_audio').addClass('off-1');
		}
        $(".icon_audio").bind("touchend",function(){
            if (myVideo.paused){
                myVideo.play();
                $('.icon_audio').addClass('border_anim');
                $('.icon_audio').removeClass('off-1');
            }
            else{
                myVideo.pause();
                $('.icon_audio').removeClass('border_anim')
                $('.icon_audio').addClass('off-1');
            }
        })
    }

	$(function () {
		$('.page-5').parallax();
		//全屏
		$('#slide .swiper-slide:not(.question .swiper-slide),#slide.swiper-container,.question,.answer').css({
			height: $(window).height()
		})
		//swiper
		var swiper = new Swiper('#slide',{
			direction : 'vertical',
			onInit: function(swiper){ //Swiper2.x的初始化是onFirstInit
				swiperAnimateCache(swiper); //隐藏动画元素
				swiperAnimate(swiper); //初始化完成开始动画
			},
			onSlideChangeEnd: function(swiper){
				swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
			}
		});
		var paper = new Swiper('.question-box', {
			scrollbar: '.swiper-scrollbar',
			direction: 'vertical',
			slidesPerView: 'auto',
			mousewheelControl: true,
			freeMode: true
		});
		var resultBox = new Swiper('#result-wrap', {
			scrollbar: '.swiper-scrollbar',
			direction: 'vertical',
			slidesPerView: 'auto',
			mousewheelControl: true,
			freeMode: true
		});
		//swiper.slideTo(2);
		//

		var key = [0,0,1,2,0,0];
		//作答
		$('.paper li').click(function () {
			var answer = {};
			var index = $(this).index();
			answer.num = $(this).parents('.item').index('.paper .item') + 1;
			answer.response = index;
			$(this).parents('.item').data('resp',answer);
			$(this).addClass('select').siblings().removeClass('select');
		})

		//下一页
		$('.btn-next').click(function () {
			var correct = 0;
			//是否全选
			var selectAll = false;
			$('.paper').find('.item').each(function (index) {
				//如果有题目没选
				if( !$(this).data('resp') ){
					selectAll = false;
					alert('有题目未选！')
					return false;
				};
				selectAll = true;
			})
			if (selectAll) {
				//得出结果
				$('.item').each(function (index) {
					if($(this).data('resp').response == key[index] ) {
						correct ++;
					}
				})
				var scores = 0;
				//全对
				if( correct == 6 ){
					scores = 100;
					$('#answer .content').removeClass('scores-100 scores-80 scores-60 scores-0').addClass('scores-100');
				}
				if( correct == 5){
					scores = 90;
					$('#answer .content').removeClass('scores-100 scores-80 scores-60 scores-0').addClass('scores-80');
				}
				if( correct == 4){
					scores = 80;
					$('#answer .content').removeClass('scores-100 scores-80 scores-60 scores-0').addClass('scores-60');
				}
				if( scores < 4){
					scores = correct * 10;
					$('#answer .content').removeClass('scores-100 scores-80 scores-60 scores-0').addClass('scores-0');
				}

				$('#answer').removeClass('hide').addClass('show').find('.scores span').text(scores);
				return false;
			}
		})
		function reset() {
			$('#answer').find('.scores span').text(00);
			$('.paper li').removeClass('select');
			$('.paper').find('.item').each(function () {
				$(this).data('resp',null);
			})
            $('.answer').removeClass('show').addClass('hide');
		}
		//再试一次
		$('.btn-retry').click(function () {
			reset();
		})
		//返回
		$('.btn-back').click(function () {
			reset();
			swiper.slideTo(4,0);
		})
	})


</script>
</html>
